<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="address">
		<view @tap="chooseAddressBack(item.id)" class="address-item" v-for="item in addressList" :key="item.id">
			<view class="address-item-left">
				<view :class="item.defaultStatus==1?'address-item-left-name default':'address-item-left-name'">{{item.name}}
					
				</view>
				<view class="address-item-left-tel">{{item.phoneNumber}}</view>
			</view>
			<view @tap.stop="goToModify(item)">
				<!-- <uni-icons  class="address-item-img" custom-prefix="iconfont" type="icon-bianji" size="28">
				</uni-icons> -->
				<i class=" iconfont address-item-img icon-bianji" ></i>
			</view>
			
		</view>
	
		<view @tap="goToModify({})" class="address-add">新增地址</view>
	</view>
</template>

<script>
	import {
		findAllAddress as findAllAddressApi
	} from '../../../api/common/index.js'
	export default {
		data() {
			return {
				addressList: [], //地址列表
				user:''
			}
		},
		onLoad() {
			this.user=uni.getStorageSync('user');
			this.getAddress();
		},
		
		methods: {
			chooseAddressBack(addressId){
				if(this.user!='user'){
					uni.navigateTo({
						url:`../confirmOrder/confirmOrder?addressId=${addressId}`
					})
					// uni.redirectTo({
					// 	url:`../confirmOrder/confirmOrder?addressId=${addressId}`
					// })
				}
			
			},
			//去修改地址页面
			goToModify(item){
				item=JSON.stringify(item)
				// uni.navigateTo({
				// 	url:`/pages/productDetail/modifyAddress/modifyAddress?address=${item}`
				// })
				
				uni.redirectTo({
					url:`/pages/productDetail/modifyAddress/modifyAddress?address=${item}`
				})
				
			},
			//获得地址列表
			getAddress() {
				findAllAddressApi()
					.then(res => {
						this.addressList = res.data.items;
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
.address{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background-color: #f1ece7;
	box-sizing: border-box;
	padding: 0 30rpx;
	&-add{
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 524rpx;
		height: 80rpx;
		background-color: #354e44;
		border-radius: 40rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 80rpx;
	}
	&-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #ccc;
		&-img{
			font-size: 50rpx;
		}
		&-left{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: space-between;
			&-name{
				font-size: 30rpx;
				color: #333;
				margin-bottom: 10rpx;
				font-weight: 500;
				
			}
			.default::after{
				display: inline-block;
				content:"默认";
				color: #FFFFFF;
				background-color: #354e44;
				width: 84rpx;
				margin-left: 20rpx;
				text-align: center;
				font-size: 26rpx;
				height: 34rpx;
				border-radius: 10rpx;
			}
			&-tel{
				color: gray;
				font-size: 26rpx;
			}
		}
		&-img{
			width: 70rpx;
			border-left: 4rpx solid #ccc;
		}
	}
}
</style>
